<template>
    <div class="container">
        <div class="energyManage">
            <div class="dataRegion">
                <div class="left">
                    <div class="left_box">
                        <div class="left_data_box" v-for=" (item,index) in zhfxData">

                            <div class="shuju_box">
                                <div class="contentname"> {{item.contentname}}</div>
                                <div class="data_jiantou">
                                    <div class="leftitem">
                                        <div class="baifenbi">{{item.baifenbi}}</div>
                                        <div class="dataunit"> {{item.dataunit}}</div>
                                    </div>
                                    <div>
                                        <img :src="item.sjurl" alt="">
                                    </div>
                                </div>
                                <!-- <div class="jixian">
                                    <div class="jixianname"> {{item.jixianname}}</div>
                                </div> -->
                                <div class="bijiaosj">
                                    <div class="yuji">{{item.yuji}}</div>
                                    <div>{{item.jieyue}}
                                        <img v-if="item.jieyue" height="15px" :src="item.sjurl" alt="">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- <div class="top5">
                        <div class="top5Left">
                            <div class="commonTitle">
                                <div class="circel"></div>
                                <div class="titleText">当日各系统用电能耗TOP5</div>
                            </div>
                            <div class="table">
                                <el-table :data="tableData" :show-header="true" border style="width: 100%">
                                    <el-table-column align="center" label="排名" width="50" type="index" />
                                    <el-table-column align="center" label="位置" prop="equipment" />
                                    <el-table-column align="center" label="能耗" prop="value" />
                                </el-table>
                            </div>
                        </div>
                        <div class="top5Right">
                            <div class="commonTitle">
                                <div class="circel"></div>
                                <div class="titleText">当日各系统用电能耗TOP5</div>
                            </div>
                            <div class="table">
                                <el-table :data="tableData2" :show-header="true" border style="width: 100%">
                                    <el-table-column align="center" label="排名" width="50" type="index" />
                                    <el-table-column align="center" label="位置" prop="equipment" />
                                    <el-table-column align="center" label="能耗" prop="value" />
                                </el-table>
                            </div>
                        </div>
                    </div> -->
                </div>
                <div class="right">
                    <div class="zs_header_content_left_item2">
                        <el-select style="margin-right: 20px;" class="select60div" v-model="formSearch.dimension"
                            size="mini" placeholder="请选择">
                            <el-option label="日" value="day"></el-option>
                            <el-option label="月" value="month"></el-option>
                            <el-option label="年" value="year"></el-option>
                        </el-select>
                        <div v-if="formSearch.dimension == 'year'" style="margin-right: 30px;">
                            <el-date-picker class="datepicker120px" size="mini" v-model="formSearch.startYear"
                                type="year" placeholder="选择开始年份">
                            </el-date-picker>
                            --
                            <el-date-picker class="datepicker120px" size="mini" v-model="formSearch.endYear" type="year"
                                placeholder="选择结束年份">
                            </el-date-picker>
                        </div>
                        <div v-if="formSearch.dimension == 'month'" style="margin-right: 30px;">
                            <el-date-picker class="datepicker120px" size="mini" v-model="formSearch.startMonth"
                                type="month" placeholder="选择开始月份">
                            </el-date-picker>
                            <span>--</span>
                            <el-date-picker class="datepicker120px" size="mini" v-model="formSearch.endMonth"
                                type="month" placeholder="选择结束月份">
                            </el-date-picker>
                        </div>
                        <div v-if="formSearch.dimension == 'day'" style="margin-right: 30px;">
                            <el-date-picker class="datepicker120px" size="mini" v-model="formSearch.startDay"
                                type="date" placeholder="选择开始日">
                            </el-date-picker>
                            <span>--</span>
                            <el-date-picker class="datepicker120px" size="mini" v-model="formSearch.endDay" type="date"
                                placeholder="选择结束日">
                            </el-date-picker>
                        </div>
                        <el-button size="mini" @click="tongji">统计</el-button>
                    </div>
                    <div class="echartsBox" style="margin-bottom:10px;">
                        <div class="commonTitle">
                            <div class="circel"></div>
                            <div class="titleText">用电能耗月度环比</div>
                        </div>
                        <div class="echartsBox1"></div>
                        <!-- style="height:310px;" -->
                    </div>
                    <div class="echartsBox">
                        <div class="commonTitle">
                            <div class="circel"></div>
                            <div class="titleText">用电能耗年度同比</div>
                        </div>
                        <div class="echartsBox2"></div>
                        <!-- style="height:350px;" -->
                    </div>
                </div>
            </div>
        </div>
        <!-- <div class="tableContent">
        <my-search-form v-bind="searchFormConfig" @search="search" />
  
        <my-table class="tableStyle" :tableData="contentData" :tableConfig="tableConfig" :totalCount="totalCount" />
      </div> -->

        <!-- <modal ref="modal" /> -->
    </div>
</template>

<script>
    import * as echarts from "echarts";
    import { statisticSenergy } from "../../url/api";
    import Modal from "../modal/modal.vue";
    import MySearchForm from "@/components/mySearchForm/mySearchForm.vue";
    import MyTable from "@/components/myTable/myTable.vue";

    import { barOptions1, barOptions2 } from "./src/echartsConfig/echartsConfig";
    import { tableConfig, searchFormConfig } from "./src/config";
    export default {
        components: { Modal, MySearchForm, MyTable },
        data() {
            return {
                formSearch: {
                    dimension: 'day',
                },
                zhfxData: [
                    { contentname: '与上年相比，报告期节能', baifenbi: '-30.2%', dataunit: '-11,654 GJ', sjurl: require('../../assets/dataimg/xiajiang.svg'), },
                    { contentname: '与上年年相比，报告期节省电能', baifenbi: '-18.2%', dataunit: '-1,332,390 kWh', sjurl: require('../../assets/dataimg/xiajiang.svg') },
                    { contentname: '与上年年相比，报告期节省用水', baifenbi: '-31.5%', dataunit: '-27,165m³', sjurl: require('../../assets/dataimg/xiajiang.svg') },
                    { contentname: '异常能耗预警数', baifenbi: '22', sjurl: require('../../assets/dataimg/xiajiang.svg'), yuji: '与上年同月相比', jieyue: '-40.1%' },
                ],
                zyxlfxdata1: [
                    { name: '电能耗', number: '5,322,390kWh', fudu: '-10.3%' },
                    { name: '用电成本', number: '3,193,434元', fudu: '-10.3%' },
                    { name: '人均电能耗', number: '240.8kWh', fudu: '-10.3%' },
                    { name: '电能耗强度', number: '4.1kWh/㎡', fudu: '-10.3%' },
                ],
                zyxlfxdata2: [
                    { name: '水能耗', number: '120,525m³', fudu: '-27.6%' },
                    { name: '用水成本（元）', number: '3,193,434', fudu: '-10.2%' },
                    { name: '水能耗强度（m³/人）', number: '4.1', fudu: '-10.8%' },
                ],
                currentIdx: 0,
                navTabs: ["用电", "用水", "供冷"],
                tableData: [
                    {
                        equipment: "暖通空调",
                        value: "0.00Kwh"
                    },
                    {
                        equipment: "智能照明",
                        value: "0.00Kwh"
                    },
                    {
                        equipment: "视频监控",
                        value: "0.00Kwh"
                    },
                    {
                        equipment: "送排风",
                        value: "0.00Kwh"
                    },
                    {
                        equipment: "电梯",
                        value: "0.00Kwh"
                    }
                ],
                tableData2: [
                    {
                        equipment: "图书馆",
                        value: "0.00Kwh"
                    },
                    {
                        equipment: "体育馆",
                        value: "0.00Kwh"
                    },
                    {
                        equipment: "文科楼A座",
                        value: "0.00Kwh"
                    },
                    {
                        equipment: "理科楼B座",
                        value: "0.00Kwh"
                    },
                    {
                        equipment: "综合楼1",
                        value: "0.00Kwh"
                    }
                ],

                searchData: {
                    seeTheWayValue: 1,
                    dateValue: 1,
                    datePeriodValue: "",

                    seeTheWayOptions: [
                        {
                            label: "按所属系统查看",
                            value: 1
                        },

                        {
                            label: "按所属区域查看",
                            value: 2
                        }
                    ],
                    dateOptions: [
                        {
                            label: "按月查看",
                            value: 1
                        },
                        {
                            label: "按年查看",
                            value: 2
                        },
                        {
                            label: "按日查看",
                            value: 3
                        }
                    ]
                },
                totalCount: 456,
                selectCount: 0,
                totalElec: 7860,
                contentData: [
                    {
                        date: "2021-09",
                        value1: "0.00",
                        value2: "0.00",
                        value3: "0.00",
                        value4: "0.00",
                        value5: "0.00",
                        value6: "0.00",
                        value7: "0.00",
                        value8: "0.00",
                        value9: "0.00",
                        value10: "0.00",
                        value11: "0.00",
                        value12: "0.00",
                        value13: "0.00"
                    },
                    {
                        date: "2021-09",
                        value1: "0.00",
                        value2: "0.00",
                        value3: "0.00",
                        value4: "0.00",
                        value5: "0.00",
                        value6: "0.00",
                        value7: "0.00",
                        value8: "0.00",
                        value9: "0.00",
                        value10: "0.00",
                        value11: "0.00",
                        value12: "0.00",
                        value13: "0.00"
                    },
                    {
                        date: "2021-09",
                        value1: "0.00",
                        value2: "0.00",
                        value3: "0.00",
                        value4: "0.00",
                        value5: "0.00",
                        value6: "0.00",
                        value7: "0.00",
                        value8: "0.00",
                        value9: "0.00",
                        value10: "0.00",
                        value11: "0.00",
                        value12: "0.00",
                        value13: "0.00"
                    },
                    {
                        date: "2021-09",
                        value1: "0.00",
                        value2: "0.00",
                        value3: "0.00",
                        value4: "0.00",
                        value5: "0.00",
                        value6: "0.00",
                        value7: "0.00",
                        value8: "0.00",
                        value9: "0.00",
                        value10: "0.00",
                        value11: "0.00",
                        value12: "0.00",
                        value13: "0.00"
                    },
                    {
                        date: "2021-09",
                        value1: "0.00",
                        value2: "0.00",
                        value3: "0.00",
                        value4: "0.00",
                        value5: "0.00",
                        value6: "0.00",
                        value7: "0.00",
                        value8: "0.00",
                        value9: "0.00",
                        value10: "0.00",
                        value11: "0.00",
                        value12: "0.00",
                        value13: "0.00"
                    }
                ],
                tableConfig,
                searchFormConfig
            };
        },
        methods: {
            navTabsChange(i) {
                this.currentIdx = i;
            },
            renderEcharts() {
                let myChart1 = echarts.init(document.querySelector(".echartsBox1"));
                myChart1.setOption(barOptions1);
                let myChart2 = echarts.init(document.querySelector(".echartsBox2"));
                myChart2.setOption(barOptions2);
            },
            selectionChange(data) {
                this.selectCount = data.length || 0;
            },
            search(data) {
                console.log(data);
                this.$refs.modal.dialogVisible = true;
            },
            reset() {
                this.$refs.formRef.resetFields();
            },
            tongji(){
                this.getStatisticSenergy()
            },
            getStatisticSenergy() {
                let params = {
                    "deviceLabelId": 0,//设备标签
                    "dimension": "",//统计维度：day-按天 month-按月 year-按年
                    "endDay": "",//结束日期
                    "endMonth": "",//结束月份
                    "endYear": 0,//结束年份
                    "pointLabelId": 0,//点位标签
                    "sectionIds": [],//	统计区域范围
                    "startDay": "",//开始日期
                    "startMonth": "",//开始月份
                    "startYear": 0//开始年份
                }
                statisticSenergy(params).then((item)=> {
                    console.log(item);
                })
            },
            init(){
                this.getStatisticSenergy();
            }
        },
        mounted() {
            this.renderEcharts();

        }
    };
</script>

<style lang="scss" scoped>
    @mixin flexLayout {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .energyManage {
        background-color: #fff;
        border-radius: 5px;
        padding: 10px 30px;
        margin-right: 10px;

        .commonTitle {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
            font-family: SourceHanSansSC-regular;
            font-weight: 550;
            font-size: 16px;

            .circel {
                width: 11px;
                height: 11px;
                background-color: rgba(166, 166, 166, 100);
                border-radius: 50%;
                margin-right: 6px;
            }
        }

        .navTabs {
            display: flex;
            align-items: center;
            background-color: rgba(219, 219, 219, 100);
            max-width: 318px;

            /deep/ .el-divider {
                background-color: #535353;
            }

            .activeTabs {
                background-color: #fff;
                border: 1px solid rgba(0, 176, 158, 100);
            }

            .tabs {
                padding: 10px 35px;
                cursor: pointer;
            }
        }

        .dataRegion {
            margin-top: 14px;
            /* margin-bottom: 30px; */
            display: flex;
            justify-content: space-between;

            .left {
                width: calc(100% - 1070px);

                .statisData {
                    display: flex;
                    justify-content: space-between;

                    .statisItem {
                        text-align: center;
                        padding: 16px 62px;
                        font-weight: 700;

                        .value {
                            color: rgba(16, 16, 16, 100);
                            font-size: 28px;
                            font-family: SourceHanSansSC-bold;
                        }

                        &:nth-child(1) {
                            border: 2px solid rgba(0, 176, 158, 100);
                        }

                        &:nth-child(2) {
                            border: 2px solid rgba(255, 203, 146, 100);
                        }

                        &:nth-child(3) {
                            border: 2px solid rgba(97, 159, 253, 100);
                        }
                    }
                }

                .top5 {
                    margin-top: 60px;
                    display: flex;
                    justify-content: space-between;

                    .top5Left,
                    .top5Right {
                        width: calc(50% - 28px);
                    }
                }
            }

            .right {
                width: 970px;
                height: 300px;
            }
        }
    }

    .tableContent {
        background-color: #fff;
        margin-top: 10px;
        margin-right: 10px;
        border-radius: 5px;

        .tableStyle {
            margin-top: 0 !important;
        }
    }

    .echartsBox1 {
        height: 310px;
    }

    .echartsBox2 {
        height: 320px;
    }




    /* ============================= */
    .zyxl_left_one,
    .zyxl_left_two {
        width: 100%;
        height: 160px;
        background: #fff;
        border-radius: 5px;
        margin-bottom: 20px;
    }

    .mzyxlnrbox {
        display: flex;
        justify-content: space-around;
    }

    .zyxlnrbox {
        display: flex;
        flex-direction: column;
        align-items: center;
        height: 160px;
        justify-content: space-evenly;
        font-size: 18px;

    }

    .luse {
        color: #007674;
    }

    .fontsize16 {
        font-size: 16px;
    }

    .fgxian {
        width: 2px;
        height: 74px;
        border-radius: 1px;
        background: #DDDDDD;
    }

    .width320 {
        width: 260px;
    }

    .width440 {
        width: 320px;
    }

    .zs_header_content_left_item2 {
        position: relative;
        width: 100%;
        /* height: 100%; */
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }

    .datepicker120px {
        width: 150px;
    }

    .select60div {
        width: 60px;
    }

    /* -============================== */
    .left_box {
        margin-top: 20px;
        width: 100%;
    }

    .left_data_box {
        width: 550px;
        height: 130px;
        background: #eee;
        border-radius: 5px;
        padding: 10px 20px 10px 20px;
        display: flex;
        margin-bottom: 30px;
        border: 1px solid #02d1ce;
        justify-content: space-around;
        flex-direction: column;
        align-items: center;
    }

    .shuju_box {
        width: 280px;
        display: flex;
        align-items: center;
        flex-direction: column;
    }

    .contentname {
        font-size: 17px;
        color: #333333;
        font-weight: 900;
        margin-bottom: 15px;
    }

    .data_jiantou {
        display: flex;
        justify-content: space-evenly;
        /* height: 70px; */
        align-items: center;
    }

    .leftitem {
        margin-right: 20px;
    }

    .baifenbi {
        font-size: 24px;
        color: #000000;
        margin-bottom: 10px;
    }

    .dataunit {
        font-size: 16px;
        color: #333333;
    }

    .jixianname {
        font-size: 16px;
        color: #333333;
    }

    .bijiaosj {
        font-size: 16px;
        color: #007674;
        width: 185px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        /* color: #0084ff; */
    }

    .yuji {
        margin-bottom: 10px;
    }
</style>